<template>
  <el-dialog
    :title="plugin.lang('template.button')"
    v-model="show"
    :width="1000"
  >
    <el-row :gutter="20">
      <el-col :span="10">
        <div class="list" style="height: auto">
          <img class="flash" style="height: 350px" :src="app.img(data.image)">
          <span class="flash wrap">{{ data.name }}</span>
        </div>
      </el-col>
      <el-col :span="14">
        <el-form label-position="top">
          <template v-for="(item, key) in form" :key="key">
            <el-form-item v-if="item.type" :label="plugin.lang('template.data.' + item.lang)">
              <el-input v-if="item.type == 'input'" v-model="form[key].value" />
              <el-input v-if="item.type == 'text'" v-model="form[key].value" :rows="form[key].rows" type="textarea" />
              <el-select v-if="item.type == 'select'" v-model="form[key].value" placeholder=" " style="width: 100%">
                <el-option
                  v-for="(dataItem, dataKey) in form[key].options"
                  :key="dataKey"
                  :label="plugin.lang('template.data.' + dataItem.label)"
                  :value="dataItem.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-form>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-if="update" @click="onUsed" plain>{{ plugin.lang('template.update') }}</el-button>
        <el-button type="primary" :loading="loading" @click="onUpdate">{{ plugin.lang('template.button') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'
import templateModel from '../../model/template'

export default {
  emits: ['update'],
  setup(props, { emit }) {
    // 对话框
    const show = ref(false)

    // 数据
    const data = ref({})
    const update = ref(false)

    // 表单
    const form = ref({})

    // 打开
    const open = template => {
      data.value = Object.assign({}, template)
      update.value = false

      // 判断是否有更新
      if(templateModel.hasUpdate(data.value)) {
        update.value = data.value
      }

      // 判断是否保存过
      if(templateModel.has(template)) {
        data.value = templateModel.getTemplate(data.value.keyword)
      }

      formTemplate()
      show.value = true
    }

    // 模版字段表单
    const formTemplate = () => {
      // 表单解析
      form.value = typeof data.value.data === 'object' ? data.value.data : JSON.parse(data.value.data)
    }

    // 使用更新
    const onUsed = () => {
      data.value = update.value
      update.value = false
      formTemplate()
    }

    // 更新
    const loading = ref(false)
    const onUpdate = () => {
      loading.value = true
      // 合并模版
      data.value.data = form.value
      // 更新配置
      templateModel.set(data.value).finally(() => {
        show.value = false
        loading.value = false
        emit('update')
      })
    }

    return {
      app,
      plugin: app.plugin.index,
      show,
      open,
      data,
      update,
      form,
      loading,
      onUsed,
      onUpdate
    }
  }
}
</script>